<!DOCTYPE html>
<html lang="zh-cn">
<head>
<#include "/common/common.ftl">
<@pnotify/>
<@layui/>
<@layer/>
<@selfcss/>
    <title>字典列表</title>
</head>
<body>
<#include "/common/navbar.ftl">
<#-- 内容开始 -->
<div class="vip_content warp">
    <form action="${base}/vip/customer?sort=start_time,desc" class="layui-form" id="search_form">
    <#-- 查询条件 -->
        <div class="panel panel-default ">
            <div class="panel-heading">
                <span>查询条件</span>
                <ul class="option-group">
                    <li><a href="javascript:void(0)" ssr-show-detail="detail" class="glyphicon glyphicon-chevron-down"
                           title="高级查询"></a></li>
                </ul>
            </div>
            <table class="table table-striped table-bordered table-hover">
                <tbody>
                <tr class="">
                    <th>会员姓名</th>
                    <td>
                        <div class="">
                            <input type="text" class="form-control layui-input" lay-verify="cusNameLike"
                                   autocomplete="off"
                                   name="cusNameLike" value="${(query.cusNameLike)!}">
                        </div>
                    </td>
                    <th>电话号码</th>
                    <td>
                        <div class=" ">
                            <input type="text" class="form-control layui-input" name="phone"
                                   value="${(query.phone)!}"></div>
                    </td>

                <#--<th>组</th>-->
                    <td rowspan="10">
                        <button class="btn btn-default" id="search_vip_info"  lay-submit="" lay-filter="search">
                            <span class="glyphicon "></span> 查询
                        </button>
                    <#--<button class="layui-btn" lay-submit="" lay-filter="search">查询</button>-->
                    </td>
                </tr>
                <tr class="detail hidden">
                    <th>开卡日期</th>
                    <td>
                        <div class="  ">
                            <input type="text" class="form-control layui-input" lay-verify="startTime" name="startTime"
                                   autocomplete="off"
                                   class="layui-input"
                                   onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD hh:mm:ss'})"
                                   value="${(query.startTime)!}">
                        </div>
                    </td>
                    <th>到期日期</th>
                    <td class=" layui-form-item">
                        <div class="">
                            <input type="text" class="form-control layui-input" autocomplete="off"
                                   lay-verify="endTime"
                                   name="endTime"
                                   class="layui-input"
                                   onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD hh:mm:ss'})"
                                   value="${(query.endTime)!}">
                        </div>
                    </td>
                </tr>
                <tr class="detail hidden">

                    <th>身份证号</th>
                    <td>
                        <div class=" ">
                            <input type="text" class="form-control layui-input" lay-verify="idNo" autocomplete="off"
                                   name="idNo" value="${(query.idNo)!}">
                        </div>
                    </td>
                    <th>会员卡号</th>
                    <td>
                        <div class="">
                            <input type="text" class="form-control layui-input" autocomplete="off"
                                   lay-verify="cardNo" name="cardNo" value="${(query.cardNo)!}">
                        </div>
                    </td>
                </tr>
                <tr class="detail hidden">
                    <th>会籍顾问</th>
                    <td>
                        <div class="">
                            <select name="counselorId" id="counselorId" lay-verify="counselorId"
                                    data-value="${query.counselorId}" value="${query.counselorId}" placeholder="性别">
                                <option value="">请选会籍顾问</option>
                            </select>
                        </div>
                    </td>

                </tr>
                </tbody>
            </table>
        </div>
    </form>
    <form action="${base}/vip/customer?sort=start_time,desc">
    <#-- 结果列表 -->
        <div class="panel panel-default">
            <div class="panel-heading">
                <span>会员列表</span>
                <ul class="option-group">
                    <li><a id="add_btn" data-toggle="modal" data-backdrop="static" href="javascript:void(0)"
                           class="glyphicon glyphicon-plus" title="添加"></a></li>
                    <li><a href="${base}/vip/customer/delete" ssr-delete-all="checkboxItem"
                           class="glyphicon glyphicon-trash" title="批量删除"></a></li>
                </ul>
            </div>
            <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                    <th><input type="checkbox" ssr-select-all="checkboxItem"> 序号</th>
                    <th>会员姓名</th>
                    <th>会员卡号</th>
                    <th>电话号码</th>
                    <th>生日</th>
                    <th>性别</th>
                    <th>身份证号</th>
                    <th>会员级别</th>
                    <th>住址</th>
                    <th>有效期</th>
                    <th>开卡日期</th>
                    <th>到期日期</th>
                    <th>会籍顾问</th>
                    <th>操作</th>
                </tr>
                </thead>
            <#list page.content as result>
                <tr>
                    <td>
                        <input type="checkbox" class="checkboxItem" value="${result.id}">
                        <a href="" data-toggle="modal" data-backdrop="static">${result_index+1}</a>
                    </td>
                    <td><a href="#" class="edit_click" data-id="${result.id}">${result.name}</a></td>
                    <td>${result.cardNo}</td>
                    <td>${result.phone}</td>
                    <td>${result.birthday}</td>
                    <td>${result.sex.label}</td>
                    <td>${result.idNo}</td>
                    <td>${result.level}</td>
                    <td>${result.address}</td>
                    <td>${result.validity}</td>
                    <td>${result.startTime}</td>
                    <td>${result.endTime}</td>
                    <td>
                        <@label id="${result.counselorId}"> </@label>
                    </td>
                    <td>
                        <ul class="option-group">
                            <li><a data-toggle="modal" data-backdrop="static" href="javascript:void(0)" title="编辑"
                                   class="glyphicon glyphicon-edit" data-id="${result.id}"></a></li>
                            <li><a href="${base}/vip/customer/${result.id}" ssr-delete-one title="删除"
                                   class="glyphicon glyphicon-trash" data-id="${result.id}"></a>
                            </li>
                        </ul>
                    </td>
                </tr>
            </#list>
                <tr>
                    <td colspan="100"><@tablePage/></td>
                </tr>
            </table>
        </div>
    </form>
</div>
<#-- 内容结束 -->
<#include "/common/footer.ftl">
<@index/>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form()
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate;

        //监听提交
        form.on('submit(search)', function (data) {
            var $form = $('#search_form');
            if (data.field.cusNameLike == "") {
                $('input[name="cusNameLike"]').attr({"disabled": true});
            }
            if (data.field.startTime == "") {
                $('input[name="startTime"]').attr({"disabled": true});
            }
            if (data.field.endTime == "") {
                $('input[name="endTime"]').attr({"disabled": true});
            }
            if (data.field.phone == "") {
                $('input[name="phone"]').attr({"disabled": true});
            }
            if (data.field.idNo == "") {
                $('input[name="idNo"]').attr({"disabled": true});
            }
            if (data.field.cardNo == "") {
                $('input[name="cardNo"]').attr({"disabled": true});
            }
            if (data.field.counselorId == "") {
                $('select[name="counselorId"]').attr({"disabled": true});
            }

            var page = $("#page").find('li[class="active"] > a').text();
            $form.append("<input type='hidden' name='page' value='" + (page - 1) + "'>");
            $form.append("<input type='hidden' name='sort' value='start_time,desc'>");
            return true;
        });


//        //自定义验证规则
//        form.verify({
//            title: function(value){
//                if(value.length < 5){
//                    return '标题至少得5个字符啊';
//                }
//            }
//            ,pass: [/(.+){6,12}$/, '密码必须6到12位']
//            ,content: function(value){
//                layedit.sync(editIndex);
//            }
//        });

//        //监听指定开关
//        form.on('switch(switchTest)', function(data){
//            layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
//                offset: '6px'
//            });
//            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
//        });
//
//        //监听提交
//        form.on('submit(demo1)', function(data){
//            layer.alert(JSON.stringify(data.field), {
//                title: '最终的提交信息'
//            })
//            return false;
//        });


    });
</script>
</body>
</html>
